<template>
  <li class="cart-item">
    <!-- 商品图片 -->
    <div class="item-img">
      <img :src="img" alt="商品" />
      <div class="tag" v-if="tag">
        {{ tag }}
      </div>
    </div>

    <!-- 商品信息 -->
    <div class="item-info">
      <p class="item-name">{{ name }}</p>
      <p class="item-price">¥{{ price.toFixed(2) }}/份</p>
    </div>

    <!-- 数量操作 -->
    <div class="quantity-control">
      <button
          class="quantity-btn"
          @click="decrement"
          :disabled="quantity <= 1"
      >
        -
      </button>
      <input
          type="number"
          class="quantity-input"
          v-model.number="currentQuantity"
          @change="handleInputChange"
      >
      <button
          class="quantity-btn"
          @click="increment"
      >
        +
      </button>

      <!-- 删除按钮 -->
      <button class="delete-btn" @click="removeItem">
        ×
      </button>
    </div>
  </li>
</template>

<script>
export default {
  props: {
    img: {
      type: String,
      required: true
    },
    name: {
      type: String,
      required: true
    },
    price: {
      type: Number,
      required: true
    },
    quantity: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      currentQuantity: this.quantity,
      tag: '招牌' // 可根据商品属性动态传值
    }
  },
  watch: {
    // 监听数量变化，同步给父组件
    currentQuantity(newVal) {
      this.$emit('change-quantity', {
        index: this.$parent.$index, // 父组件循环的索引（需配合 v-for 使用）
        newQuantity: newVal
      });
    }
  },
  methods: {
    decrement() {
      if (this.currentQuantity > 1) {
        this.currentQuantity--;
      }
    },
    increment() {
      this.currentQuantity++;
    },
    handleInputChange(e) {
      const val = parseInt(e.target.value);
      if (val > 0) {
        this.currentQuantity = val;
      } else {
        this.currentQuantity = 1; // 输入无效值时重置为1
      }
    },
    removeItem() {
      this.$emit('remove-item');
    }
  }
}
</script>

<style scoped>
.cart-item {
  display: flex;
  align-items: center;
  background-color: #fff;
  margin-bottom: 3vw;
  padding: 3vw;
  border-radius: 4vw;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* 商品图片 */
.item-img {
  position: relative;
  width: 20vw;
  height: 20vw;
  margin-right: 4vw;
}
.item-img img {
  width: 100%;
  height: 100%;
  border-radius: 4vw;
  object-fit: cover;
}
.tag {
  position: absolute;
  top: 2vw;
  left: 2vw;
  background-color: #ff9900;
  color: #fff;
  font-size: 2.8vw;
  padding: 1vw 2vw;
  border-radius: 2vw;
}

/* 商品信息 */
.item-info {
  flex: 1;
}
.item-name {
  font-size: 3.6vw;
  font-weight: bold;
  margin-bottom: 2vw;
}
.item-price {
  font-size: 3.2vw;
  color: #ff4d4f;
}

/* 数量操作 */
.quantity-control {
  display: flex;
  align-items: center;
}
.quantity-btn {
  width: 6vw;
  height: 6vw;
  line-height: 6vw;
  text-align: center;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 2vw;
  font-size: 4vw;
  margin: 0 2vw;
}
.quantity-input {
  width: 8vw;
  height: 6vw;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 2vw;
  font-size: 3.2vw;
}
.delete-btn {
  background-color: #ff4d4f;
  color: #fff;
  width: 6vw;
  height: 6vw;
  line-height: 6vw;
  text-align: center;
  border: none;
  border-radius: 50%;
  font-size: 4vw;
  margin-left: 4vw;
}
</style>